<template>
  <div>
    <div class="outmain ba_f formwidth">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>支付宝小程序设置</span>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="mar_b20">
        <el-tab-pane label="支付宝小程序设置" name="1">
          <div v-if="activeName=='1'">
            <el-form ref="form" :model="formData" :rules="rules" label-width="180px" class="mar_t20">
              <el-form-item label="当前小程序uniacid" prop="uniacid">
                <el-input v-model="formData.uniacid" placeholder="请输入小程序uniacid" disabled></el-input>
              </el-form-item>
              <el-form-item label="小程序名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入小程序名称"></el-input>
              </el-form-item>
              <el-form-item label="支付宝AppId" prop="appId">
                <el-input v-model="formData.appId" placeholder="请输入支付宝AppId"></el-input>
              </el-form-item>
              <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                  <span>支付设置</span>
                </div>
              </div>
              <el-form-item label="支付宝公钥" prop="publicKey">
                <el-input v-model="formData.publicKey" type="textarea" :rows="6" placeholder="请输入支付宝公钥"></el-input>
              </el-form-item>
              <el-form-item label="支付宝应用私钥" prop="privateKey">
                <el-input v-model="formData.privateKey" type="textarea" :rows="6" placeholder="请输入支付宝应用私钥"></el-input>
              </el-form-item>
              <el-form-item label="AES密钥">
                <el-input v-model="formData.aesKey" placeholder="请输入AES密钥"></el-input>
              </el-form-item>
              <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                  <span>扫码点餐设置</span>
                </div>
              </div>
              <el-form-item label="支付宝服务商PID">
                <el-input v-model="formData.rebate_pid" placeholder="请输入支付宝服务商PID"></el-input>
                <div class="yb_margin lh16">支付宝服务商-账户中心-合作伙伴管理-基础信息-PID</div>
              </el-form-item>
              <el-form-item label="门店id">
                <el-input v-model="formData.shop_id" placeholder="请输入门店id"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="支付宝代运营授权" name="2">
          <div v-if="activeName=='2'">
            <el-form ref="formData2" :model="formData2" label-width="180px" class="mar_t20">
              <el-form-item label="支付宝账号" prop="formData2.account" :required="true">
                <el-input v-model="formData2.account" placeholder="请输入支付宝账号"></el-input>
                <div class="yb_margin lh16">请填写真实的支付宝账号</div>
              </el-form-item>
              <el-form-item label="商户号" v-if="info.state=='2'">
                <el-input v-model="merchant_no"></el-input>
              </el-form-item>
              <el-form-item label="授权详情" v-if="info.state!='2'">
                <el-button type="text" class="subjectcolor2" @click="djsq">点击授权</el-button>
              </el-form-item>
              <el-form-item label="授权状态">
                <el-tag size="medium" type="info" v-if="info.state=='0'">待授权</el-tag>
                <el-tag size="medium" type="warning" v-if="info.state=='1'">待确认</el-tag>
                <el-tag size="medium" type="success" v-if="info.state=='2'">已授权</el-tag>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c" v-if="activeName=='1'">
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
  </div>
</template>
<script>
import {postConfig, getConfig } from '@/api/setup.js';
import { sendAuth, authInfo } from '@/api/plug.js';
export default {
  data() {
    return {
      activeName:'1',
      formData: {
        ident: 'aliSet',
        uniacid: '',
        name: '',
        appId: '',
        privateKey: '',
        publicKey: '',
        aesKey: '',
        rebate_pid: '',
        shop_id: '',
      },
      formData2:{
        storeId:'',
        account:'',
      },
      info: {},
      merchant_no:'',
      rules: {
        name: [{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
        appId: [{ required: true, message: '请输入支付宝appid', trigger: 'blur' }],
        publicKey: [{ required: true, message: '请输入支付宝公钥', trigger: 'blur' }],
        privateKey: [{ required: true, message: '请输入支付宝私钥', trigger: 'blur' }]
      },
    };
  },
  created() {
    getConfig({ ident: 'aliSet' }).then((res) => {
      if (res.code == 1) {
        Object.assign(this.formData, res.data);
      }
    });
  },
  methods: {
    async djsq() {
      if(!this.formData2.account){
        this.$baseMessage('请填写支付宝账号', "error");
        return
      }else {
        const {msg} = await sendAuth(this.formData2);
        this.$baseMessage(msg, "success");
        const {data} = await authInfo();
        if(data){
          this.info = data
          this.formData2.account = data.account
          this.merchant_no = data.merchant_no
        }
      }
    },
    async authInfo(){
      const {data} = await authInfo();
      if(data){
        this.info = data
        this.formData2.account = data.account
        this.merchant_no = data.merchant_no
      }
    },
    async handleClick() {
      if (this.activeName == '1') {
        getConfig({ ident: 'aliSet' }).then((res) => {
          if (res.code == 1) {
            Object.assign(this.formData, res.data);
          }
        });
      } else if (this.activeName == '2') {
        this.authInfo()
      }
    },
    onSubmit() {
      this.$refs.form.validate((flag) => {
        if (flag) {
          postConfig(this.formData).then((res) => {
            if (res.code == 1) {
              this.$baseMessage('保存成功！', 'success');
            }
          });
        }
      });
    }
  }
};
</script>
<style>
.orderpop p {
  line-height: 24px;
}
.msgtext {
  text-indent: -70px;
  padding-left: 70px;
}
</style>
